<template>
	<!-- 筛选区 -->
  <div class="sub-filter" v-if="filterData && !filterLoading">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <span @click="changeBrand(brand.id)" :class="{active:filterData.selectedBrand===brand.id}" v-for="brand in filterData.brands" :key="brand.id">{{brand.name}}</span>
      </div>
    </div>
    <div class="item" v-for="p in filterData.saleProperties" :key="p.id">
      <div class="head">{{p.name}}：</div>
      <div class="body">
        <span @click="changeAttr(p, attr.id)" :class="{active:p.selectedProp===attr.id}" v-for="attr in p.properties" :key="attr.id">{{attr.name}}</span>
      </div>
    </div>
  </div>
  <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px" animated="fade" />
    <XtxSkeleton class="item" width="800px" height="40px" animated="fade" />
    <XtxSkeleton class="item" width="600px" height="40px" animated="fade" />
    <XtxSkeleton class="item" width="600px" height="40px" animated="fade" />
    <XtxSkeleton class="item" width="600px" height="40px" animated="fade" />
  </div>
</template>
<script lang="ts">
export default {
  name: 'SubFilter'
}
</script>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import { findSubCategoryFilter } from '@/api/category'
import { attrType, filterParamsType, myPropertiesType } from '@/types/paramsTypes'

type filterDataType = {
  brands: Array<{id: string, name: string}>,
  categories: Array<{id: string, name: string}>,
  goods: Array<{id: string, name: string}>,
  saleProperties: myPropertiesType[],
  selectedBrand: string
}

const route = useRoute()
// 筛选数据
const filterData = ref<filterDataType>({
  selectedBrand: '',
  brands: [],
  saleProperties: [],
  categories: [],
  goods: []
})
// 数据是否加载中
const filterLoading = ref(false)
watch(() => route.params.id, (newVal) => {
  // 先判断是否是二级分类
  if (newVal && route.path === ('/category/sub/' + newVal)) {
    filterLoading.value = true
    findSubCategoryFilter(route.params.id as string).then(({ result }) => {
      // 品牌,增加选择的品牌属性和全部选项
      result.selectedBrand = ''
      result.brands.unshift({ id: '', name: '全部' })
      // 销售属性,给每个销售属性增加选择的销售属性和全部选项
      result.saleProperties.forEach((p: myPropertiesType) => {
        p.selectedProp = ''
        p.properties.unshift({ id: '', name: '全部' })
      })
      filterData.value = result
      filterLoading.value = false
    })
  }
}, { immediate: true })
// 获取筛选参数
const getFilterParams = () => {
  const filterParams: filterParamsType = {
    brandId: undefined
  }
  let attrs: attrType[] = []
  // 处理品牌
  if(filterData.value.selectedBrand) filterParams.brandId = filterData.value.selectedBrand
  // 处理筛选条件
  attrs = filterData.value.saleProperties.filter(p => p.selectedProp !== '').map(p => ({
    groupName: p.name,
    propertyName: p.properties.find(attr => attr.id === p.selectedProp)?.name || ''
  }))
  if (attrs.length) filterParams.attrs = attrs
  return filterParams
}

const emit = defineEmits(['filterChange'])

// 选择品牌
const changeBrand = (brandId: string) => {
  if (filterData.value.selectedBrand === brandId) return
  filterData.value.selectedBrand = brandId
  emit('filterChange', getFilterParams())
}
// 选中属性
const changeAttr = (p: myPropertiesType, attrId: string) => {
  if (p.selectedProp === attrId) return
  p.selectedProp = attrId
  emit('filterChange', getFilterParams())
}
</script>

<style scoped lang='less'>
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        span {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          cursor: pointer;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
    .xtx-skeleton {
      padding: 10px 0;
    }
  }
</style>